<template>
  <div>
    <el-button
      style="margin-bottom: 10px"
      icon="el-icon-plus"
      type="primary"
      @click="addNewPunishItem"
      >添加处置</el-button
    >
    <el-table :data="punishList" border stripe>
      <el-table-column label="姓名" prop="user_name" width="100" align="center">
      </el-table-column>
      <el-table-column
        label="工作单位"
        prop="dept_name"
        min-width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="职务"
        prop="duty_level"
        min-width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column label="岗位" prop="post" min-width="150" align="center">
      </el-table-column>
      <el-table-column
        label="组织措施"
        prop="solve_mode"
        min-width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="党纪处分"
        prop="party_punish"
        min-width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="政务处分"
        prop="gov_punish"
        min-width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        prop=""
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editPunishItem(scope)"
            >编辑</el-button
          >
          <el-button
            icon="el-icon-minus"
            type="danger"
            size="mini"
            @click="removePunishItem(scope)"
          >
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="四种形态处理结果"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="dialog.punishItemForm"
      @close="dialog.punishItemForm = false"
    >
      <el-form
        :model="punishItemForm"
        ref="punishItemForm"
        :rules="punishItemRules"
        label-width="150px"
        :inline="false"
      >
        <el-form-item label="姓名" prop="user_name">
          <el-input v-model="punishItemForm.user_name"></el-input>
        </el-form-item>
        <el-form-item label="工作单位" prop="dept_name">
          <el-input v-model="punishItemForm.dept_name"></el-input>
        </el-form-item>
        <el-form-item label="职务" prop="duty_level">
          <el-input v-model="punishItemForm.duty_level"></el-input>
        </el-form-item>
        <el-form-item label="岗位" prop="post">
          <el-input v-model="punishItemForm.post"></el-input>
        </el-form-item>
        <el-form-item label="组织措施" prop="solve_mode">
          <div class="check-wrapper">
            <div>
              <label>第一种形态组织措施</label>
              <div>
                <el-checkbox
                  v-for="(item, index) in options.mode1"
                  v-model="item.checked"
                  :key="'m1_' + index"
                  :label="item.label"
                  :checked="item.checked"
                  @change="checkMode"
                ></el-checkbox>
              </div>
            </div>
            <div>
              <label>第二种形态组织措施</label>
              <div>
                <el-checkbox
                  v-for="(item, index) in options.mode2"
                  v-model="item.checked"
                  :key="'m2_' + index"
                  :label="item.label"
                  :checked="item.checked"
                  @change="checkMode"
                ></el-checkbox>
              </div>
            </div>
            <div>
              <label>第三种形态组织措施</label>
              <div>
                <el-checkbox
                  v-for="(item, index) in options.mode3"
                  v-model="item.checked"
                  :key="'m3_' + index"
                  :label="item.label"
                  @change="checkMode"
                ></el-checkbox>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="党纪处分" prop="party_punish">
          <el-select v-model="punishItemForm.party_punish">
            <el-option
              v-for="(item, index) in options.party_punish"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="政务处分" prop="gov_punish">
          <el-select v-model="punishItemForm.gov_punish">
            <el-option
              v-for="(item, index) in options.gov_punish"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="punishItemAdd">保存</el-button>
          <el-button @click="dialog.punishItemForm = false">返回</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getSelectOptions } from "@/api/Index";
import { required } from "@/utils/eValidate";
export default {
  props: {
    punishList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      punishItemForm: {
        key: "",
        user_name: "",
        dept_name: "",
        duty_level: "",
        post: "",
        solve_mode: "",
        party_punish: "",
        gov_punish: "",
      },
      punishItemRules: {
        user_name: [required],
        dept_name: [required],
        duty_level: [required],
        post: [required],
      },
      dialog: {
        punishItemForm: false,
      },
      options: {
        party_punish: [],
        gov_punish: [],
        mode1: [],
        mode2: [],
        mode3: [],
      },
    };
  },
  methods: {
    punishItemAdd() {
      this.$refs.punishItemForm.validate((valid) => {
        if (valid) {
          if (this.punishItemForm.key) {
            this.punishList = this.punishList.map((i) => {
              if (i.key == this.punishItemForm.key) {
                i = JSON.parse(JSON.stringify(this.punishItemForm));
              }
              return i;
            });
          } else {
            this.punishList.push(
              JSON.parse(
                JSON.stringify(
                  Object.assign(this.punishItemForm, {
                    key: new Date(),
                  })
                )
              )
            );
          }
          this.$emit("update:punishList", this.punishList);

          this.dialog.punishItemForm = false;
        }
      });
    },
    async initOptions(target) {
      return await getSelectOptions({
        parameter: target,
      }).then((res) => {
        if (res.code == 0) {
          return res.data;
        }
      });
    },
    checkMode() {
      let all = this.options.mode1.concat(
        this.options.mode2.concat(this.options.mode3)
      );

      let checked = all
        .filter((i) => {
          if (i.checked) {
            return i;
          }
        })
        .map((i) => {
          return i.value;
        })
        .join(",");

      this.punishItemForm.solve_mode = checked;
      this.$set(this.punishItemForm, "solve_mode", checked);
    },
    addNewPunishItem() {
      this.dialog.punishItemForm = true;
      this.$nextTick(() => {
        this.$refs.punishItemForm.resetFields();
      });
      this.resetOptions();
      this.punishItemForm.key = "";
    },
    editPunishItem(item) {
      this.punishItemForm = JSON.parse(JSON.stringify(item.row));
      this.dialog.punishItemForm = true;
      this.initChecked();
    },
    removePunishItem(item) {
      this.$emit(
        "update:punishList",
        this.punishList.filter((i) => {
          return i.key != item.row.key;
        })
      );
    },
    initChecked() {
      if (this.punishItemForm.solve_mode.trim() != "") {
        let checked = this.punishItemForm.solve_mode.split(",");
        checked.forEach((c, index) => {
          this.options.mode1 = this.options.mode1.map((i) => {
            if (c == i.value) {
              i.checked = true;
            }
            return i;
          });
          this.options.mode2 = this.options.mode2.map((i) => {
            if (c == i.value) {
              i.checked = true;
            }
            return i;
          });
          this.options.mode3 = this.options.mode3.map((i) => {
            if (c == i.value) {
              i.checked = true;
            }
            return i;
          });
          checked.slice(index, 1);
        });
      }
    },
    resetOptions() {
      this.options.mode1 = this.options.mode1.map((i) => {
        i.checked = false;
        return i;
      });
      this.options.mode2 = this.options.mode2.map((i) => {
        i.checked = false;
        return i;
      });
      this.options.mode3 = this.options.mode3.map((i) => {
        i.checked = false;
        return i;
      });
    },
  },
  created() {
    this.initOptions("党纪处分").then((res) => {
      this.options.party_punish = res;
    });
    this.initOptions("政务处分").then((res) => {
      this.options.gov_punish = res;
    });
    this.initOptions("第一种形态组织措施").then((res) => {
      this.options.mode1 = res.map((i) => {
        i.checked = false;
        return i;
      });
    });
    this.initOptions("第二种形态组织措施").then((res) => {
      this.options.mode2 = res.map((i) => {
        i.checked = false;
        return i;
      });
    });
    this.initOptions("第三种形态组织措施").then((res) => {
      this.options.mode3 = res.map((i) => {
        i.checked = false;
        return i;
      });
    });
  },
  computed: {},
};
</script>

<style lang="scss" scoped>
.check-wrapper {
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: space-around;
  > div {
    width: 32%;
    > label {
      width: 100%;
      display: inline-block;
      text-align: center;
      font-weight: 600;
    }
    > div {
      text-align: left;
      height: calc(100% - 36px);
      overflow-y: auto;
    }
    &:nth-child(1) {
      border-right: 1px solid #ccc;
    }
    &:nth-child(2) {
      border-right: 1px solid #ccc;
    }
  }
}
</style>